<template>
	<view class="card">
		<view class="head">
			<view class="order_id">
				订单号：{{data.id}}
			</view>
			<view class="status" :class="statusColor">
				{{status}}
			</view>
		</view>
		<view class="content">
			<image class="img" :src="data.imgUrl" mode=""></image>
			<view class="info">
				<view class="title">
					{{data.name}}
				</view>
				<view class="price_count">
					<view class="price">
						￥{{data.price.toFixed(2)}}
					</view>
					<view class="count">
						x{{data.count}}
					</view>
				</view>
			</view>
		</view>
		<view class="foot">
			<view class="">
				<view class="total_price">
					<text class="yunfei">运费:￥{{data.freight.toFixed(2)}}</text>
					<view class="total">总金额: <text class="price"> ￥{{totalPrice}}</text></view>
				</view>
				<view style="display: flex;justify-content: flex-end;padding: 0 30rpx 30rpx;">
					<view class="btn">
						申请退款
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		props: {
			data: {
				type: Object,
				default: () => {
					{}
				}
			}
		},
		data() {
			return {
				statusColor: "",
				statusText:""
			}
		},
		computed: {
			totalPrice() {
				return (this.data.price * this.data.count).toFixed(2)
			},
			status() {
				if (this.data.status == 0) {
					this.statusColor = "hong"
					this.statusText = "删除订单"
					return "交易关闭"
				}
				if (this.data.status == 1) {
					this.statusColor = "huang"
					this.statusText = "申请退款"
					return "待发货"
				}
				if (this.data.status == 2) {
					this.statusColor = "lv"
					this.statusText = "确认收货"
					return "待收货"
				}
				if (this.data.status == 3) {
					this.statusColor = "lan"
					this.statusText = "评价晒单"
					return "待评价"
				}
			}
		},
		methods: {

		}
	}
</script>


<style lang="scss">
	.hong {
		color: #ff0000;
	}

	.huang {
		color: #ffd66e;
	}

	.lv {
		color: #00ff00;
	}

	.lan {
		color: #00aaff;
	}

	.card {
		margin-bottom: 20rpx;
		background-color: #fff;
		border-radius: 8rpx;
	}

	.head {
		display: flex;
		justify-content: space-between;
		padding: 20rpx;
	}

	.content {
		display: flex;
		padding: 20rpx;
		border-bottom: 2rpx solid #ccc;
		background-color: #fff;

		.img {
			width: 200rpx;
			height: 200rpx;
		}

		.info {
			flex: 1;
			display: flex;
			justify-content: space-between;
			flex-direction: column;
			padding: 20rpx 30rpx 30rpx;

			.title {
				@include ell-mline();
				font-size: 32rpx;
			}

			.price_count {
				display: flex;
				justify-content: space-between;

				.count {
					color: #969696;
				}
			}
		}
	}

	.foot {
		display: flex;
		justify-content: flex-end;

		.total_price {
			display: flex;
			margin: 20rpx 0;
			font-size: 26rpx;

			.yunfei {
				color: #969696;
			}

			.total {
				margin: 0 20rpx;

				.price {
					color: #ff0000;
				}
			}
		}

		.btn {
			padding: 14rpx 40rpx;
			border-radius: 40rpx;
			background-color: #efefef;
			font-size: 28rpx;
		}
	}
</style>